<!DOCTYPE html>
<html>
    <head>
        <title>欢迎使用微信公众号文章剪报工具</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 引入 Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
        <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
        <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
        <div id="loading"></div>
        <div class="container">
            <div class="row ">
                <div class="center-block" style="width:200px;">
                    <h1>剪报在线</h1>
                </div>
            </div>
            <div class="row ">
                <div class="col-md-10 col-sm-8 col-xs-8 column">
                    <input type="input" id="docUrl" class="form-control" style="width:100%" placeholder="请输入微信公众号文章地址:">
                </div>
                <div class="btn-group">
                    <button id="saveBtn" class="btn btn-success" type="button">剪下来</button>
                    <button id="clearBtn" class="btn hidden-xs" type="button">刷新</button>
                </div>
            </div>
            <div class="row ">
                <div class="col-md-12 hidden-xs column">
                    <label>示例:http://mp.weixin.qq.com/s/HolMqSOS1C3GBFRFZz3oyQ</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 column">
                    <label id="docHtml" style="display: none;">
                        文章预览:<a id='prevHtml' href="#" target="_blank"></a>
                    </label>
                <!-- </div>
                <div class="col-md-6 column"> -->
                    <label id="pdf">
                        <a id="convertToPDF" class="btn" style="display: none;">转为PDF</a>
                    </label>
                </div>
            </div>
        </div>
        <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    <script type="text/javascript">
      $(document).ready(function(){   
        var biz = '';
        $("#clearBtn").click(function(){
            window.location.reload();
        })

           $("#convertToPDF").click(function () {  
            $('#convertToPDF').css('display','none');
            $.ajax({  
            type: 'GET',  
                url: "/pdf/"+biz,  
                // dataType: "jsonp",  
                jsonpCallback: 'callback',    
                success: function (data) {  
                    // ...  
                    var resp = JSON.parse(data);
                    console.log(resp);
                    if(resp.code==0){
                       $('#pdf').html('<a  href="'+biz+'.pdf" target="_blank">查看PDF</a>')
                       biz = '';
                    }else{
                       alert(resp.msg);
                    }
                },  
                error: function (xhr, status, error) {  
                    console.log('Error: ' + error.message);  
                },  
              });  
           });  

           $("#saveBtn").click(function () {  
            var docUrl = $("#docUrl").val();  
            if(docUrl==''){
               alert('你还没有输入地址');return;
            }
            if(/mp.weixin.qq.com/.test(docUrl)){
                $.ajax({  
                type: 'POST',  
                    url: "/clip",  
                    // dataType: "jsonp",  
                    data:  { "docUrl": docUrl} ,          
                    jsonpCallback: 'callback',    
                    success: function (data) {  
                        // ...  
                        var resp = JSON.parse(data);
                        console.log(resp);
                        if(resp.code==0){
                           $('#prevHtml').attr('href',resp.data.biz+'.html');
                           $('#prevHtml').text(resp.data.title);
                           biz = resp.data.biz;
                           $('#convertToPDF').css('display','');
                           $('#docHtml').css('display','');
                        }else{
                           alert(resp.msg);
                        }
                    },  
                    error: function (xhr, status, error) {  
                        console.log('Error: ' + error.message);  
                    },  
                  });  
               
            }else{
               alert("地址无效,貌似不是微信文章")
            }
         });  

           // 禁止ajax执行过程中页面的其他操作
           $(document).ajaxStart(function() {
            showLoading();
           }).ajaxStop(function() {
            hideLoading();
           });
        // ajax请求开始显示进度窗体
        function showLoading() {
         var background = $('<div id="loading_div" style="z-index: 999998; position: fixed; left: 0px; top: 0px; width: 100%; background-color:#ffffff; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;"></div>');
         var div = $('<div id="loading_pic" style="z-index: 999999; position: fixed; height: 60px; width: 100%; text-align:center;"><img src="loading.gif"/></div>');
         $(document.body).append(div);
         $(document.body).append(background);
         background.height($(window).height());
         div.css({
            top : (background.outerHeight() - div.outerHeight()) / 2 + "px"
         });
        }
        // ajax请求结束移除进度窗体
        function hideLoading() {
         $("#loading_div", document.body).remove();
         $("#loading_pic", document.body).remove();
        }

      }); 

    </script>
</html>
